<template>
	<view class="danmu-container" v-if="visible">
		<!-- 弹幕显示区域 -->
		<view class="danmu-area" :style="{height: areaHeight + 'px'}">
			<!-- 每条弹道 -->
			<view class="danmu-track" v-for="(track, index) in tracks" :key="index"
				:style="{height: trackHeight + 'px', top: index * trackHeight + 'px'}">
				<!-- 每条弹幕 -->
				<view class="danmu-item" v-for="(item, i) in track.items" :key="i" :style="{
            left: item.left + 'px',
            color: item.color,
            fontSize: fontSize + 'px'
          }">
					{{ item.text }}
				</view>
			</view>
		</view>

		<!-- 弹幕输入框 -->
		<!-- <view class="danmu-input-area">
			<input class="danmu-input" v-model="inputText" placeholder="发个弹幕吧~" @confirm="sendDanmu" />
			<button class="send-btn" @click="sendDanmu">发送</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			// 弹幕区域高度
			areaHeight: {
				type: Number,
				default: 200
			},
			// 每条弹道高度
			trackHeight: {
				type: Number,
				default: 30
			},
			// 字体大小
			fontSize: {
				type: Number,
				default: 14
			},
			// 初始弹幕数据
			initDanmus: {
				type: Array,
				default: () => []
			},
			// 弹幕速度 (px/s)
			speed: {
				type: Number,
				default: 100
			},
			// 弹道数量
			trackCount: {
				type: Number,
				default: 5
			},
			// 弹幕颜色列表
			colors: {
				type: Array,
				default: () => ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#8B00FF']
			},
			visible: {
				type: Boolean,
				default: false
			},
		
		},

		data() {
			return {
				// inputText: '',
				tracks: [],
				danmuPool: [], // 弹幕池
				timer: null,
				systemWidth: 375 // 系统宽度，会在onLoad中获取
			}
		},

		created() {
			// 初始化弹道
			this.initTracks()
			// 初始化弹幕池
			this.danmuPool = [...this.initDanmus]
			// 获取系统宽度
			this.getSystemInfo()
		},

		mounted() {
			// 开始弹幕滚动
			this.startDanmu()
		},

		beforeDestroy() {
			// 清除定时器
			clearInterval(this.timer)
		},

		methods: {
			// 获取系统信息
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						this.systemWidth = res.windowWidth
					}
				})
			},

			// 初始化弹道
			initTracks() {
				this.tracks = Array.from({
					length: this.trackCount
				}, () => {
					return {
						items: []
					}
				})
			},

			// 开始弹幕
			startDanmu() {
				// 先清空之前的定时器
				clearInterval(this.timer)

				// 设置定时器
				this.timer = setInterval(() => {
					this.moveDanmu()
					this.addDanmuFromPool()
				}, 16) // 约60fps
			},

			// 移动弹幕
			moveDanmu() {
				const distance = this.speed / 60 // 每帧移动距离

				this.tracks.forEach(track => {
					track.items.forEach(item => {
						item.left -= distance
					})

					// 移除已经移出屏幕的弹幕
					track.items = track.items.filter(item => {
						const textWidth = this.getTextWidth(item.text)
						return item.left + textWidth > 0
					})
				})
			},

			// 从弹幕池添加弹幕
			addDanmuFromPool() {
				if (this.danmuPool.length === 0) return

				// 随机决定是否添加弹幕
				if (Math.random() > 0.3) return

				// 找出最空闲的弹道
				let minTrackIndex = 0
				let minItemsCount = this.tracks[0].items.length

				for (let i = 1; i < this.tracks.length; i++) {
					if (this.tracks[i].items.length < minItemsCount) {
						minItemsCount = this.tracks[i].items.length
						minTrackIndex = i
					}
				}

				// 如果最空闲的弹道已经有弹幕，检查是否可以添加新弹幕
				if (minItemsCount > 0) {
					const lastItem = this.tracks[minTrackIndex].items[minItemsCount - 1]
					const lastItemWidth = this.getTextWidth(lastItem.text)

					// 如果最后一个弹幕已经移动了一定距离，才添加新弹幕
					if (lastItem.left + lastItemWidth > this.systemWidth * 0.7) {
						return
					}
				}

				// 从弹幕池取出一条弹幕
				const danmu = this.danmuPool.shift()
				if (!danmu) return

				// 添加到弹道
				this.addDanmuToTrack(minTrackIndex, danmu)

				// 将弹幕重新加入池子实现循环
				this.danmuPool.push(danmu)
			},

			// 添加弹幕到指定弹道
			addDanmuToTrack(trackIndex, danmu) {
				const text = typeof danmu === 'string' ? danmu : danmu.text
				const color = typeof danmu === 'string' ? this.getRandomColor() : (danmu.color || this.getRandomColor())

				this.tracks[trackIndex].items.push({
					text,
					color,
					left: this.systemWidth
				})
			},

			// 发送弹幕
			sendDanmu(inputText) {
				if (!inputText.trim()) return

				// 找出最空闲的弹道
				let minTrackIndex = 0
				let minItemsCount = this.tracks[0].items.length

				for (let i = 1; i < this.tracks.length; i++) {
					if (this.tracks[i].items.length < minItemsCount) {
						minItemsCount = this.tracks[i].items.length
						minTrackIndex = i
					}
				}

				// 添加到弹道
				this.addDanmuToTrack(minTrackIndex, inputText)
				// // 通知父组件
				// this.$emit('send', this.inputText)
				// // 清空输入框
				// this.inputText = ''


			},

			// 获取随机颜色
			getRandomColor() {
				return this.colors[Math.floor(Math.random() * this.colors.length)]
			},

			// 估算文本宽度
			getTextWidth(text) {
				// 简单估算：每个字符大约占fontSize * 0.6宽度
				return text.length * this.fontSize * 0.6
			}
		}
	}
</script>

<style scoped>
	.danmu-container {
		width: 100%;
		position: relative;
	}

	.danmu-area {
		width: 100%;
		position: relative;
		overflow: hidden;
		position: fixed;
		top: 40px;
		left: 0;
	}

	.danmu-track {
		position: absolute;
		width: 100%;
	}

	.danmu-item {
		position: absolute;
		white-space: nowrap;
		line-height: 1.2;
	}


	
</style>